<script setup>
import { ref } from 'vue'
import user from '@/assets/user.jpg'
import { useRoute, useRouter } from 'vue-router'
import request from '@/utils/axios';
const router = useRouter()
const route = useRoute()
const userAccount = ref('');
const userPassword = ref('');
const onSubmit = async () => {
    const res = await request.post('/user/login', {
        userAccount: userAccount.value,
        userPassword: userPassword.value
    })
    if (res.data) {
        showSuccessToast('登录成功');
        router.push('/')

    } else {
        showFailToast(res.description);
    }
}
</script>
<template>

    <div style="text-align: center; margin-top: 30px; margin-bottom: 15px">
        <van-image round width="10rem" height="10rem" :src="user" />
    </div>
    <div id="title" style="text-align: center; margin-top: 30px; margin-bottom: 30px">
        <h3>上号！开黑！五排！速来！</h3>
    </div>
    <van-form @submit="onSubmit">
        <!-- 账号密码 -->
        <van-cell-group>
            <van-field v-model="userAccount" name="userAccount" label="账号" placeholder="请输入账号" left-icon="manager-o"
                required :clickable="true" :rules="[{ required: true, message: '请填写账号' }]" />
            <van-field v-model="userPassword" type="password" name="userPassword" label="密码" placeholder="密码"
                left-icon="closed-eye" required :clickable="true" :rules="[{ required: true, message: '请填写密码' }]" />
        </van-cell-group>

        <div class="container">
            <!-- 登录注册 -->
            <div class="loginBtn">
                <van-button round block type="primary" native-type="submit">
                    登录
                </van-button>
            </div>
            <div class="registerBtn">
                <van-button round block type="primary" is-link to="/user/register">
                    注册
                </van-button>
            </div>
        </div>
    </van-form>

</template>

<style scoped lang='scss'>
.container{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    .loginBtn{
        margin-top: 16px;
        width: 150px;
    }
    .registerBtn{
        margin-top: 16px;
        width: 150px;
    }
}
</style>